<template>
  <div>
    <el-form ref="xForm" v-model="formData" :config="formConfig">
      <!--      <template #executionListener>-->
      <!--        <el-badge :value="executionListenerLength">-->
      <!--          <el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>-->
      <!--        </el-badge>-->
      <!--      </template>-->
      <!--      <template #taskListener>-->
      <!--        <el-badge :value="taskListenerLength">-->
      <!--          <el-button size="small" @click="dialogName = 'taskListenerDialog'">编辑</el-button>-->
      <!--        </el-badge>-->
      <!--      </template>-->
      <!--      <template #multiInstance>-->
      <!--        <el-badge :is-dot="hasMultiInstance">-->
      <!--          <el-button size="small" @click="dialogName = 'multiInstanceDialog'">编辑</el-button>-->
      <!--        </el-badge>-->
      <!--      </template>-->
      <!--      <template #checkSingleUser>-->
      <!--          <el-input placeholder="请选择人员" class="input-with-select" v-model="checkValues">-->
      <!--              <template slot="append">-->
      <!--                &lt;!&ndash;指定用户&ndash;&gt;-->
      <!--                <el-button style="padding-left: 7px" icon="el-icon-user" @click="singleUserCheck"/>-->
      <!--                <el-divider direction="vertical"></el-divider>-->
      <!--                &lt;!&ndash;选择表达式&ndash;&gt;-->
      <!--                <el-button style="padding-right: 7px" icon="el-icon-postcard" @click="singleExpCheck('assignee')"/>-->
      <!--              </template>-->
      <!--          </el-input>-->
      <!--      </template>-->
      <!--      <template #checkMultipleUser>-->
      <!--          <el-input placeholder="请选择候选用户" class="input-with-select" v-model="checkValues">-->
      <!--            <template slot="append">-->
      <!--              &lt;!&ndash;候选用户&ndash;&gt;-->
      <!--              <el-button style="padding-left: 7px" icon="el-icon-user" @click="multipleUserCheck"/>-->
      <!--              <el-divider direction="vertical"></el-divider>-->
      <!--              &lt;!&ndash;选择表达式&ndash;&gt;-->
      <!--              <el-button style="padding-right: 7px" icon="el-icon-postcard" @click="singleExpCheck('candidateUsers')"/>-->
      <!--            </template>-->
      <!--          </el-input>-->
      <!--      </template>-->
      <!--      <template #checkRole>-->
      <!--        <el-input placeholder="请选择候选角色" class="input-with-select" v-model="checkValues">-->
      <!--          <template slot="append">-->
      <!--          &lt;!&ndash;候选角色&ndash;&gt;-->
      <!--            <el-button style="padding-left: 7px" icon="el-icon-user" @click="multipleRoleCheck"/>-->
      <!--            <el-divider direction="vertical"></el-divider>-->
      <!--              &lt;!&ndash;选择表达式&ndash;&gt;-->
      <!--            <el-button style="padding-right: 7px" icon="el-icon-postcard" @click="singleExpCheck('candidateGroups')"/>-->
      <!--          </template>-->
      <!--        </el-input>-->
      <!--      </template>-->
      <el-collapse v-model="activeNames">
        <el-collapse-item name="1">
          <template #title>
            <el-icon class="header-icon">
              <info-filled/>
            </el-icon>
            常规信息
          </template>
          <el-form-item label="节点ID" :rules="[{ required: true, message: 'Id 不能为空' }]">
            <el-input type="text" v-model="formData['id']"></el-input>
          </el-form-item>
          <el-form-item label="节点名称" :rules="[{ required: true, message: ' 节点名称不能为空' }]">
            <el-input type="text" v-model="formData['name']"></el-input>
          </el-form-item>
          <el-form-item label="节点描述">
            <el-input type="textarea" v-model="formData['documentation']"></el-input>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item name="2">
          <template #title>
            <el-icon class="header-icon">
              <List/>
            </el-icon>
            任务配置
          </template>
          <el-form-item label="异步">
            <el-switch
                v-model="formData['async']"
                active-text="是"
                inactive-text="否"
                :active-value="true"
                :inactive-value="false">
            </el-switch>
          </el-form-item>
          <el-form-item label="用户类型">
            <el-select v-model="formData['userType']">
              <el-option v-for="(item,index) in userTypeOption" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="formData['userType']=='assignee'" label="指定人员">
            <FmSelectTable v-model:value="formData['checkSingleUser']" @submit="handleUserSelect" check-type="single"
                           title="指定人员" :columns="selectUsercolumns" url="/process/admin" keys="id" lable="loginName" tableName="user">
            </FmSelectTable>
          </el-form-item>
          <el-form-item v-if="formData['userType']=='candidateUsers'" label="候选人员">
            <FmSelectTable v-model:value="formData['checkMultipleUser']" @submit="handleUserSelect" title="候选人员"
                           :columns="selectUsercolumns" url="/process/admin" keys="id"
                           lable="loginName" tableName="user">
            </FmSelectTable>
          </el-form-item>
          <el-form-item v-if="formData['userType']=='candidateGroups'" label="候选角色">
            <FmSelectTable v-model:value="formData['checkRole']" @submit="handleRoleSelect" check-type="single"
                           title="候选角色" :columns="selectRolecolumns" url="/process/admin" keys="id" lable="name" tableName="role">
            </FmSelectTable>
          </el-form-item>
          <el-form-item label="优先级">
            <el-input type="text" v-model="formData['priority']"></el-input>
          </el-form-item>
          <el-form-item label="到期时间">
            <el-input type="text" v-model="formData['dueDate']"></el-input>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item name="3">
          <template #title>
            <el-icon class="header-icon">
              <List/>
            </el-icon>
            表单配置
          </template>
          <el-form-item label="流程表单">
            <FmSelectTable v-model:value="formData['formKey']" :visible="userVisible" check-type="single"
                           title="表单配置" :columns="selectcolumns" url="/process/flowable" keys="formId" lable="formName" tableName="sysform">
            </FmSelectTable>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item name="4">
          <template #title>
            <el-icon class="header-icon">
              <List/>
            </el-icon>
            执行监听器
          </template>
          <el-form-item label="监听器">
            <FmSelectTable v-model:value="formData['formKey']" title="表单配置" :columns="selectcolumns"
                           url="/process/flowable" keys="formId"  lable="formName"
                           tableName="sysform">
            </FmSelectTable>
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
    </el-form>
    <executionListenerDialog
        v-if="dialogName === 'executionListenerDialog'"
        :element="element"
        :modeler="modeler"
        @close="finishExecutionListener"
    />
    <taskListenerDialog
        v-if="dialogName === 'taskListenerDialog'"
        :element="element"
        :modeler="modeler"
        @close="finishTaskListener"
    />
    <multiInstanceDialog
        v-if="dialogName === 'multiInstanceDialog'"
        :element="element"
        :modeler="modeler"
        @close="finishMultiInstance"
    />
    <!--选择人员-->
    <el-dialog
        title="选择人员"
        :visible.sync="userVisible"
        width="60%"
        :close-on-press-escape="false"
        :show-close="false"
    >
      <flow-user :checkType="checkType" :selectValues="selectValues" @handleUserSelect="handleUserSelect"></flow-user>
      <span slot="footer" class="dialog-footer">
      <el-button @click="userVisible = false">取 消</el-button>
      <el-button type="primary" @click="checkUserComplete">确 定</el-button>
    </span>
    </el-dialog>
    <!--选择表达式-->
    <el-dialog
        title="选择表达式"
        :visible.sync="expVisible"
        width="60%"
        :close-on-press-escape="false"
        :show-close="false"
    >
      <flow-exp :selectValues="selectValues" @handleSingleExpSelect="handleSingleExpSelect"></flow-exp>
      <span slot="footer" class="dialog-footer">
      <el-button @click="expVisible = false">取 消</el-button>
      <el-button type="primary" @click="checkExpComplete">确 定</el-button>
    </span>
    </el-dialog>
    <!--选择角色-->
    <el-dialog
        title="选择候选角色"
        :visible.sync="roleVisible"
        width="60%"
        :close-on-press-escape="false"
        :show-close="false"
    >
      <flow-role :checkType="checkType" :selectValues="selectValues" @handleRoleSelect="handleRoleSelect"></flow-role>
      <span slot="footer" class="dialog-footer">
      <el-button @click="roleVisible = false">取 消</el-button>
      <el-button type="primary" @click="checkRoleComplete">确 定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
import mixinPanel from '../../common/mixinPanel'
import executionListenerDialog from '@/components/Process/components/nodePanel/property/executionListener.vue'
import taskListenerDialog from '@/components/Process/components/nodePanel/property/taskListener.vue'
import multiInstanceDialog from '@/components/Process/components/nodePanel/property/multiInstance.vue'
import {commonParse, userTaskParse} from '../../common/parseElement'
import {StrUtil} from '@/utils/StrUtil'
import FlowUser from '@/components/flow/User/index.vue'
import FlowRole from '@/components/flow/Role/index.vue'
import FlowExp from '@/components/flow/Expression/index.vue'
import {fetchData} from "@/api/index";

export default {
  components: {
    executionListenerDialog,
    taskListenerDialog,
    multiInstanceDialog,
    FlowUser,
    FlowRole,
    FlowExp,
  },
  mixins: [mixinPanel],
  props: {
    users: {
      type: Array,
      required: true
    },
    groups: {
      type: Array,
      required: true
    },
    exps: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      activeNames: "1",
      selectcolumns: [
        {
          "label": "表单编号",//标签名称
          "index": "formId",//数据库索引
          "search": true,//是否是搜索表单
          "dataType": "text",//值值类型默认字符类型
          "addable": false
        },
        {
          "label": "表单名称",//标签名称
          "index": "formName",//数据库索引
          "search": true,//是否是搜索表单
          "dataType": "text",//值值类型默认字符类型
          "addable": false
        },
        {
          "label": "备注",//标签名称
          "index": "remark",//数据库索引
          "search": true,//是否是搜索表单
          "dataType": "text",//值值类型默认字符类型
          "addable": false
        },
      ],
      selectUsercolumns: [
        {
          "label": "用户编号",//标签名称
          "index": "id",//数据库索引
          "search": true,//是否是搜索表单
          "dataType": "text",//值值类型默认字符类型
        },
        {
          "label": "用户账号",//标签名称
          "index": "loginName",//数据库索引
          "search": true,//是否是搜索表单
          "dataType": "text",//值值类型默认字符类型
        },
        {
          "label": "用户状态",//标签名称
          "index": "status",//数据库索引
          "dataType": "text",//值值类型默认字符类型
        },
      ],
      selectRolecolumns: [
        {
          "label": "角色编号",//标签名称
          "index": "id",//数据库索引
          "search": true,//是否是搜索表单
          "dataType": "text",//值值类型默认字符类型
        },
        {
          "label": "角色名称",//标签名称
          "index": "name",//数据库索引
          "search": true,//是否是搜索表单
          "dataType": "text",//值值类型默认字符类型
        },
        {
          "label": "角色描述",//标签名称
          "index": "desc",//数据库索引
          "dataType": "text",//值值类型默认字符类型
        },
      ],
      userTypeOption: [
        {label: '指定人员', value: 'assignee'},
        {label: '候选人员', value: 'candidateUsers'},
        {label: '候选角色', value: 'candidateGroups'}
      ],
      dialogName: '',
      executionListenerLength: 0,
      taskListenerLength: 0,
      hasMultiInstance: false,
      userVisible: false,
      roleVisible: false,
      expVisible: false,
      formData: {},
      assignee: null,
      candidateUsers: null,
      candidateGroups: null,
      // 选类型
      checkType: 'single',
      // 选中的值
      checkValues: null,
      // 数据回显
      selectValues: null,
      // 用户列表
      userList: this.users,
      // 角色列表
      groupList: this.groups,
      // 表达式列表
      expList: this.exps,
      // 表达式类型
      expType: null,
      // 表单列表
      formList: [],
    }
  },
  computed: {
    formConfig() {
      const _this = this
      return {
        inline: false,
        item: [
          {
            xType: 'input',
            name: 'id',
            label: '节点 id',
            rules: [{required: true, message: 'Id 不能为空'}]
          },
          {
            xType: 'input',
            name: 'name',
            label: '节点名称',
            rules: [{required: true, message: '节点名称不能为空'}]
          },
          {
            xType: 'input',
            name: 'documentation',
            label: '节点描述'
          },
          {
            xType: 'slot',
            name: 'executionListener',
            label: '执行监听器'
          },
          {
            xType: 'slot',
            name: 'taskListener',
            label: '任务监听器',
            show: !!_this.showConfig.taskListener
          },
          {
            xType: 'select',
            name: 'userType',
            label: '用户类型',
            // clearable: true,
            dic: _this.userTypeOption,
            // rules: [{ required: true, message: '用户类型不能为空' }],
            show: !!_this.showConfig.userType
          },
          {
            xType: 'slot',
            name: 'checkSingleUser',
            label: '指定人员',
            // rules: [{ required: true, message: '指定人员不能为空' }],
            show: !!_this.showConfig.assignee && _this.formData.userType === 'assignee'
          },
          {
            xType: 'slot',
            name: 'checkMultipleUser',
            label: '候选人员',
            // rules: [{ required: true, message: '候选人员不能为空' }],
            show: !!_this.showConfig.candidateUsers && _this.formData.userType === 'candidateUsers'
          },
          {
            xType: 'slot',
            name: 'checkRole',
            label: '候选角色',
            // rules: [{ required: true, message: '候选角色不能为空' }],
            show: !!_this.showConfig.candidateGroups && _this.formData.userType === 'candidateGroups'
          },
          {
            xType: 'slot',
            name: 'multiInstance',
            label: '多实例'
          },
          {
            xType: 'switch',
            name: 'async',
            label: '异步',
            activeText: '是',
            inactiveText: '否',
            show: !!_this.showConfig.async
          },
          {
            xType: 'input',
            name: 'priority',
            label: '优先级',
            show: !!_this.showConfig.priority
          },
          // {
          //   xType: 'input',
          //   name: 'formKey',
          //   label: '表单标识key',
          //   show: !!_this.showConfig.formKey
          // },
          {
            xType: 'select',
            name: 'formKey',
            label: '表单标识key',
            clearable: true,
            dic: {data: _this.formList, label: 'formName', value: 'formId'},
            show: !!_this.showConfig.formKey
          },
          {
            xType: 'input',
            name: 'skipExpression',
            label: '跳过表达式',
            show: !!_this.showConfig.skipExpression
          },
          {
            xType: 'switch',
            name: 'isForCompensation',
            label: '是否为补偿',
            activeText: '是',
            inactiveText: '否',
            show: !!_this.showConfig.isForCompensation
          },
          {
            xType: 'switch',
            name: 'triggerable',
            label: '服务任务可触发',
            activeText: '是',
            inactiveText: '否',
            show: !!_this.showConfig.triggerable
          },
          {
            xType: 'switch',
            name: 'autoStoreVariables',
            label: '自动存储变量',
            activeText: '是',
            inactiveText: '否',
            show: !!_this.showConfig.autoStoreVariables
          },
          {
            xType: 'input',
            name: 'ruleVariablesInput',
            label: '输入变量',
            show: !!_this.showConfig.ruleVariablesInput
          },
          {
            xType: 'input',
            name: 'rules',
            label: '规则',
            show: !!_this.showConfig.rules
          },
          {
            xType: 'input',
            name: 'resultVariable',
            label: '结果变量',
            show: !!_this.showConfig.resultVariable
          },
          {
            xType: 'switch',
            name: 'exclude',
            label: '排除',
            activeText: '是',
            inactiveText: '否',
            show: !!_this.showConfig.exclude
          },
          {
            xType: 'input',
            name: 'class',
            label: '类',
            show: !!_this.showConfig.class
          },
          {
            xType: 'datePicker',
            type: 'datetime',
            valueFormat: 'yyyy-MM-ddTHH:mm:ss',
            name: 'dueDate',
            label: '到期时间',
            show: !!_this.showConfig.dueDate
          }
        ]
      }
    }
  },
  watch: {
    'formData.userType': function (val, oldVal) {
      if (StrUtil.isNotBlank(oldVal)) {
        delete this.element.businessObject.$attrs[`flowable:${oldVal}`]
        delete this.formData[oldVal]
        // 清除已选人员数据
        this.checkValues = '';
        this.selectValues = null;
        // 删除xml中已选择数据类型节点
        delete this.element.businessObject.$attrs[`flowable:dataType`]
      }
      // 写入userType节点信息到xml
      this.updateProperties({'flowable:userType': val})
    },
    'formData.async': function (val) {
      if (StrUtil.isNotBlank(val)) {
        this.updateProperties({'flowable:async': val})
      }
    },
    'formData.dueDate': function (val) {
      if (StrUtil.isNotBlank(val)) {
        this.updateProperties({'flowable:dueDate': val})
      }
    },
    'formData.formKey': function (val) {
      if (StrUtil.isNotBlank(val)) {
        this.updateProperties({'flowable:formKey': val})
      } else {
        // 删除xml中已选择表单信息
        delete this.element.businessObject[`formKey`]
      }
    },
    'formData.priority': function (val) {
      if (StrUtil.isNotBlank(val)) {
        this.updateProperties({'flowable:priority': val})
      }
    },
    'formData.skipExpression': function (val) {
      if (StrUtil.isNotBlank(val)) {
        this.updateProperties({'flowable:skipExpression': val})
      } else {
        delete this.element.businessObject.$attrs[`flowable:skipExpression`]
      }
    },
    'formData.isForCompensation': function (val) {
      if (StrUtil.isNotBlank(val)) {
        this.updateProperties({'isForCompensation': val})
      }
    },
    'formData.triggerable': function (val) {
      if (StrUtil.isNotBlank(val)) {
        this.updateProperties({'flowable:triggerable': val})
      }
    },
    'formData.class': function (val) {
      if (StrUtil.isNotBlank(val)) {
        this.updateProperties({'flowable:class': val})
      }
    },
    'formData.autoStoreVariables': function (val) {
      if (StrUtil.isNotBlank(val)) {
        this.updateProperties({'flowable:autoStoreVariables': val})
      }
    },
    'formData.exclude': function (val) {
      if (StrUtil.isNotBlank(val)) {
        this.updateProperties({'flowable:exclude': val})
      }
    },
    'formData.ruleVariablesInput': function (val) {
      if (StrUtil.isNotBlank(val)) {
        this.updateProperties({'flowable:ruleVariablesInput': val})
      }
    },
    'formData.rules': function (val) {
      if (StrUtil.isNotBlank(val)) {
        this.updateProperties({'flowable:rules': val})
      }
    },
    'formData.resultVariable': function (val) {
      if (StrUtil.isNotBlank(val)) {
        this.updateProperties({'flowable:resultVariable': val})
      }
    }
  },
  created() {
    let cache = commonParse(this.element)
    cache = userTaskParse(cache)
    this.formData = cache
    this.computedExecutionListenerLength()
    this.computedTaskListenerLength()
    this.computedHasMultiInstance()
    //指定用户
    if(this.formData.userType=="assignee"){
      this.formData.checkSingleUser=this.formData[this.formData.userType];

    }
    //候选用户
    if(this.formData.userType=="candidateUsers"){
      this.formData.checkMultipleUser=this.formData[this.formData.userType];
    }
    //角色组
    if(this.formData.userType=="candidateGroups"){
      this.formData.checkRole=this.formData[this.formData.userType];

    }

    // 人员信息回显
    // this.checkValuesEcho();
    // // 加载表单列表
    // this.getListForm();
  },
  methods: {
    computedExecutionListenerLength() {
      this.executionListenerLength = this.element.businessObject.extensionElements?.values
          ?.filter(item => item.$type === 'flowable:ExecutionListener').length ?? 0
    },
    computedTaskListenerLength() {
      this.taskListenerLength = this.element.businessObject.extensionElements?.values
          ?.filter(item => item.$type === 'flowable:TaskListener').length ?? 0
    },
    computedHasMultiInstance() {
      if (this.element.businessObject.loopCharacteristics) {
        this.hasMultiInstance = true
      } else {
        this.hasMultiInstance = false
      }
    },
    // 获取表单信息
    getListForm() {
      fetchData("/process/flowable/form/formList").then((res) => {
        
        res.forEach(item => {
          
          item.formId = item.formId.toString();
        })
        this.formList = res;
      })
    },
    // 设计器右侧表单数据回显
    checkValuesEcho() {
      const that = this;
      const attrs = that.element.businessObject.$attrs;
      const businessObject = that.element.businessObject;
      console.log(that.element.businessObject, "this.element.businessObject")
      // 指定用户
      if (attrs.hasOwnProperty("flowable:assignee")) {
        const val = attrs["flowable:assignee"];
        // 查找是否动态指定人员(选中流程表达式)
        if (attrs["flowable:dataType"] === "dynamic") {
          this.checkValues = that.expList.find(item => item.expression == val).name;
          this.selectValues = that.expList.find(item => item.expression == val).id;
        } else {
          
          this.checkValues = that.userList.find(item => item.userId == val).nickName;
          this.selectValues = that.userList.find(item => item.userId == val).userId;
        }
        // 候选用户
      } else if (attrs.hasOwnProperty("flowable:candidateUsers")) {
        const val = attrs["flowable:candidateUsers"];
        if (attrs["flowable:dataType"] === "dynamic") {
          this.checkValues = that.expList.find(item => item.expression == val).name;
          this.selectValues = that.expList.find(item => item.expression == val).id;
        } else {
          const newArr = that.userList.filter(i => val.split(',').includes(i.userId))
          this.checkValues = newArr.map(item => item.nickName).join(',');
          this.selectValues = newArr.map(item => item.userId).join(',');
        }
      } else if (businessObject.hasOwnProperty("candidateGroups") || attrs.hasOwnProperty("flowable:candidateGroups")) {
        // 候选角色信息
        const val = businessObject["candidateGroups"] || attrs["flowable:candidateGroups"];
        if (attrs["flowable:dataType"] === "dynamic") {
          this.checkValues = that.expList.find(item => item.expression == val).name;
          this.selectValues = that.expList.find(item => item.expression == val).id;
        } else {
          const newArr = that.groupList.filter(i => val.split(',').includes(i.roleId))
          this.checkValues = newArr.map(item => item.roleName).join(',');
          this.selectValues = newArr.map(item => item.roleId).join(',');
        }
      }
    },
    finishExecutionListener() {
      if (this.dialogName === 'executionListenerDialog') {
        this.computedExecutionListenerLength()
      }
      this.dialogName = ''
    },
    finishTaskListener() {
      if (this.dialogName === 'taskListenerDialog') {
        this.computedTaskListenerLength()
      }
      this.dialogName = ''
    },
    finishMultiInstance() {
      if (this.dialogName === 'multiInstanceDialog') {
        this.computedHasMultiInstance()
      }
      this.dialogName = ''
    },
    /*单选人员*/
    singleUserCheck() {
      this.userVisible = true;
      this.checkType = "single";
    },
    /*多选人员*/
    multipleUserCheck() {
      this.userVisible = true;
      this.checkType = "multiple";
    },
    /*单选角色*/
    singleRoleCheck() {
      this.roleVisible = true;
      this.checkType = "single";
    },
    /*多选角色*/
    multipleRoleCheck() {
      this.roleVisible = true;
      this.checkType = "multiple";
    },
    /*单选表达式*/
    singleExpCheck(expType) {
      this.expVisible = true;
      this.expType = expType;
    },
    // 选中表达式
    handleSingleExpSelect(selection) {
      this.deleteFlowAttar();
      this.updateProperties({'flowable:dataType': 'dynamic'})
      if ("assignee" === this.expType) {
        this.updateProperties({'flowable:assignee': selection.expression});
      } else if ("candidateUsers" === this.expType) {
        this.updateProperties({'flowable:candidateUsers': selection.expression});
      } else if ("candidateGroups" === this.expType) {
        this.updateProperties({'flowable:candidateGroups': selection.expression});
      }
      this.checkValues = selection.name;
      this.expType = null;
    },
    // 用户选中数据
    handleUserSelect(selection) {
      const that = this;
      if (selection) {
        that.deleteFlowAttar();
        that.updateProperties({'flowable:dataType': 'fixed'})
        if (selection instanceof Array) {
          const userIds = selection.map(item => item.keys);
          const nickName = selection.map(item => item.lable);
          that.updateProperties({'flowable:candidateUsers': userIds.join(',')})
          that.checkValues = nickName.join(',');
        } else {
          
          that.updateProperties({'flowable:assignee': selection.keys})
          that.checkValues = selection.nickName;
        }
      }
    },
    // 角色选中数据
    handleRoleSelect(selection, name) {
      const that = this;
      if (selection && name) {
        that.deleteFlowAttar();
        that.updateProperties({'flowable:dataType': 'fixed'})
        that.updateProperties({'flowable:candidateGroups': selection});
        that.checkValues = name;
      }
    },
    /*用户选中赋值*/
    checkUserComplete() {
      this.userVisible = false;
      this.checkType = "";
    },
    /*候选角色选中赋值*/
    checkRoleComplete() {
      this.roleVisible = false;
      this.checkType = "";
    },
    /*表达式选中赋值*/
    checkExpComplete() {
      this.expVisible = false;
    },
    // 删除节点
    deleteFlowAttar() {
      delete this.element.businessObject.$attrs[`flowable:dataType`]
      delete this.element.businessObject.$attrs[`flowable:assignee`]
      delete this.element.businessObject.$attrs[`flowable:candidateUsers`]
      delete this.element.businessObject.$attrs[`flowable:candidateGroups`]
    }
  }
}
</script>

<style></style>
